<template>
  <div class="header_box">
    <div class="left">
        <span class="assembly">assembly</span>
    </div>
    <div class="mid"></div>
    <div class="right">
        <div class="avatar">
            <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link">
                    <div class="out"></div>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click="out">退出登录</el-dropdown-item>
                    <el-dropdown-item @click="switchUser">切换用户</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
          
        }
    },
    components:{

    },
    watch:{

    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods: {
        out() {
            //1.清除缓存
            //2.地址跳转
            this.$router.push(`/index`)
        },
        switchUser() {
            //1.清除缓存
            //2.地址跳转
            this.$router.push(`/index`)
        }
    }
}
</script>

<style lang="less" scoped>
.header_box {
    display: flex;
    line-height: 60px;
    .left {
        position: relative;
        flex: 1;
        font-size: 26px;
        font-weight: 700;
        color: #fff;
        .assembly {
            margin-left: 20px;
        }
    }
    .mid {
        flex: 1;
    }
    .right {
        flex: 2;
        .avatar {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin-top: 10px;
            float: right;
            margin-right: 30px;
            // 背景图片
            background-image: url("~@/assets/avatar/avatar.jpg");
            background-size: 40px; 
        }
        .out {
             position: relative;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            float: right;
            margin-right: 30px;
        }
    }
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

        
</style>